<template>
  <div>
    <img
      src="@/assets/images/AI.png"
      @click="showDldh"
      class="aiStyle"
      v-if="showLogo"
    />

    <el-drawer size="1070px" :visible.sync="drawer" :withHeader="false">
      <div class="conversation-container">
        <!-- 对话列表 -->
        <el-card
          :class="showLeft ? 'conversation-list' : 'conversation-list sq'"
          v-loading="leftLoading"
        >
          <div class="top">
            <i
              class="el-icon-d-arrow-left"
              @click="showLeft = false"
              v-if="showLeft"
            ></i>
            <i
              class="el-icon-d-arrow-right"
              @click="showLeft = true"
              v-if="!showLeft"
            ></i>
            <i class="el-icon-plus" v-if="showLeft" @click="goAdd()"></i>
          </div>
          <div
            ref="scrollbarRef"
            :style="'height:' + hdHeight + 'px;overflow: auto;'"
            v-if="showLeft"
          >
            <template v-for="(group, groupName) in groupedConversations">
              <div class="bigClass">{{ groupName }}</div>
              <div
                v-for="conversation in group"
                :key="conversation.id"
                :class="
                  conversation.id == currentConversationId
                    ? 'conversation-item active'
                    : 'conversation-item'
                "
                @click="onSelectConversation(conversation.id)"
              >
                <!-- 重命名输入框 -->
                <input
                  v-if="editingConversationId === conversation.id"
                  v-model="conversation.title"
                  @blur="updateConversationTitle(conversation)"
                  @keyup.enter="updateConversationTitle(conversation)"
                  class="conversation-edit-input"
                  autofocus
                />
                <span
                  v-else
                  class="conversation-title"
                  @dblclick="enableEditing(conversation)"
                >
                  {{ conversation.title }}
                </span>
                <el-dropdown
                  @command="handleConversationAction($event, conversation)"
                >
                  <span class="dropdown-trigger">
                    <i class="el-icon-more" />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="delete">删除</el-dropdown-item>
                    <el-dropdown-item command="rename">重命名</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </div>
        </el-card>

        <!-- 对话内容 -->
        <el-card class="conversation-content">
          <div class="top">
            <!-- 厂商选择部分 -->
            <el-dropdown class="dropdown-wrapper" trigger="click">
              <span class="el-dropdown-link">
                {{ selectedVendor || "选择模型" }}
                <i class="el-icon-arrow-down el-dropdown-link-icon"></i>
              </span>

              <el-dropdown-menu slot="dropdown" class="dropdown-wrapper-list">
                <div class="moTitle">选择厂商</div>
                <el-popover
                  v-for="(models, provider) in modelList"
                  placement="right"
                  :value="showMx && showMxType == provider"
                >
                  <div class="moTitle">选择模型</div>
                  <el-radio-group
                    v-model="selectedVendor"
                    @input="changeMxFun"
                    class="myradio"
                  >
                    <el-radio
                      v-for="item in modelList[provider]"
                      :label="item.model_name"
                      >{{ item.model_name }}</el-radio
                    >
                  </el-radio-group>
                  <el-dropdown-item slot="reference" :key="provider">
                    <div
                      :class="provider == showMxType ? 'active' : ''"
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                      @mouseover="handleMouseOver(provider)"
                    >
                      {{ provider }} <i class="el-icon-arrow-right"></i>
                    </div>
                  </el-dropdown-item>
                </el-popover>
              </el-dropdown-menu>
            </el-dropdown>
            <i class="el-icon-error" @click="drawer = false"></i>
          </div>
          <!-- 无对话时显示新建提示 -->
          <div v-if="showNewConversationPrompt" class="new-conversation-prompt">
            <p>你可以问我们任何写作方面的问题</p>
            <div class="input-area input-area-New">
              <el-input
                type="textarea"
                :rows="3"
                v-model="userInput"
                :maxlength="8000"
                show-word-limit
                placeholder="输入关键词进行提问"
                @keyup.enter.native="createNewConversation"
                :disabled="loading"
              ></el-input>
              <el-button
                v-if="!isDhJx"
                icon="el-icon-top"
                class="fs"
                type="primary"
                @click="createNewConversation"
                :disabled="!userInput.trim()"
              ></el-button>
              <el-button v-else class="fs" type="primary" @click="stopDh"
                ><span class="zt"></span
              ></el-button>
            </div>
          </div>
          <div
            v-else
            ref="messageArea"
            class="message-area"
            :style="'height:' + hdHeight + 'px;overflow:auto;'"
          >
            <div
              v-for="(message, i) in messages"
              :key="i + message.role + message.id"
              :class="['message', message.role]"
            >
              <img src="@/assets/images/AI.png" class="aiImg" />
              <div class="message-content" v-html="message.content"></div>
              <div class="caoZuo" v-if="message.role == 'ai' && message.id">
                <img
                  src="@/assets/images/ai1.png"
                  alt=""
                  title="重新生成"
                  @click="aicxsc(message, i)"
                />
                <img
                  src="@/assets/images/ai2.png"
                  alt=""
                  title="复制"
                  v-clipboard:copy="message.content"
                  v-clipboard:success="clipboardSuccess"
                />
                <img
                  src="@/assets/images/ai3.png"
                  alt=""
                  title="保存"
                  @click="aisave(message)"
                  v-if="zpId"
                />
                <!--                <img src="@/assets/images/ai4.png" alt="" title="保存素材库">-->
                <el-popconfirm
                  @confirm="airemove(message, i)"
                  icon="el-icon-warning"
                  title="因回复与提问存在关联关系，删除回复内容后提问内容也会一并删除"
                >
                  <img
                    slot="reference"
                    src="@/assets/images/ai5.png"
                    alt=""
                    title="删除"
                  />
                </el-popconfirm>
              </div>
            </div>
          </div>
          <div class="input-area" v-if="!showNewConversationPrompt">
            <el-input
              type="textarea"
              :rows="3"
              :maxlength="8000"
              show-word-limit
              v-model="userInput"
              placeholder="输入关键词进行提问"
              @keyup.enter.native="sendMessage"
              :disabled="loading"
            ></el-input>
            <el-button
              v-if="!isDhJx"
              icon="el-icon-top"
              class="fs"
              type="primary"
              @click="sendMessage"
              :disabled="loading || !userInput.trim()"
            ></el-button>
            <el-button v-else class="fs" type="primary" @click="stopDh"
              ><span class="zt"></span
            ></el-button>
          </div>
        </el-card>

        <!-- 保存素材对话框 -->
        <el-dialog title="保存到素材库" :visible.sync="saveDialogVisible">
          <el-form :model="saveForm">
            <el-form-item label="素材标题">
              <el-input v-model="saveForm.title"></el-input>
            </el-form-item>
            <el-form-item label="选择分类">
              <el-select v-model="saveForm.category" placeholder="请选择分类">
                <el-option label="人物库" value="character"></el-option>
                <el-option label="描述词" value="description"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择标签">
              <el-select
                v-model="saveForm.tags"
                multiple
                placeholder="请选择标签"
              >
                <el-option
                  v-for="tag in tags"
                  :key="tag"
                  :label="tag"
                  :value="tag"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer">
            <el-button @click="saveDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="saveToLibrary">确定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapMutations } from "vuex";
import {
  conversationCreate,
  conversationDelete,
  conversationDetail,
  conversationList,
  conversationSend,
  conversationUpTitle,
} from "@/api/conversation";
import { getToken } from "@/utils/auth";
import {
  conversationChangeModels,
  conversationDefault,
  conversationModels,
  conversationMsgDelete,
  conversationSave,
  conversationsList,
  getLastPairId,
  stopConversation,
} from "@/api/conversations";
import { getVolumeList } from "@/api/volumes";
import store from "@/store";

export default {
  name: "MultiTurnConversation",
  data() {
    return {
      zpId: "",
      isDhJx: false,
      selectMd: "",
      showMx: false,
      bl: "/prod-api",
      hdHeight: 200,
      drawer: false,
      showLogo: true,
      editingConversationId: null,
      showLeft: true,
      conversations: [],
      showMxType: "",
      selectedVendor: "", // 选择的厂商
      selectedModel: null, // 选择的模型
      modelList: {},
      rightPage: 1, // 当前页码
      rightPageSize: 10, // 每页加载条数
      leftPage: 1, // 当前页码
      leftPageSize: 20, // 每页加载条数
      hasMore: true, // 是否还有更多数据
      loading: false,
      leftLoading: false,
      messages: [],
      userInput: "",
      saveDialogVisible: false,
      saveForm: {
        title: "",
        category: "",
        tags: [],
      },
      tags: ["凡人逆袭", "天才觉醒", "科幻冒险", "三角恋情"],
    };
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  computed: {
    ...mapState({
      currentConversationId: (state) => state.conversation.conversation_id,
    }),

    showNewConversationPrompt() {
      return !this.currentConversationId; // Vuex 中无 conversation_id 时显示新对话提示
    },
    // 按时间分组对话
    groupedConversations() {
      const groups = { 今天: [], 前7天: [], 前30天: [], 更早: [] };
      const now = new Date();

      this.conversations.forEach((conversation) => {
        const createdAt = new Date(conversation.created_at);
        const diffTime = (now - createdAt) / (1000 * 60 * 60 * 24);

        if (diffTime <= 1) groups.今天.push(conversation);
        else if (diffTime <= 7) groups.前7天.push(conversation);
        else if (diffTime <= 30) groups.前30天.push(conversation);
        else groups.更早.push(conversation);
      });

      // 移除空分组
      return Object.fromEntries(
        Object.entries(groups).filter(([_, value]) => value.length > 0)
      );
    },
  },
  methods: {
    async stopDh() {
      await stopConversation({ conversation_id: this.currentConversationId });
      this.isDhJx = false;
      let last = await getLastPairId({
        conversation_id: this.currentConversationId,
      });
      this.messages[this.messages.length - 1].conversation_id =
        this.currentConversationId;
      this.messages[this.messages.length - 1].id = last.pair_id;
    },
    async changeMxFun(item) {
      this.showMx = false;

      var obj = {
        model_name: this.selectedVendor,
      };
      if (this.currentConversationId) {
        obj.conversation_id = this.currentConversationId;
      }
      await conversationChangeModels(obj);
      this.$message.success("模型切换成功");
    },
    handleMouseOver(item) {
      this.showMx = true;
      this.showMxType = item;
    },
    //获取模型描述
    getModelDesc(model_name) {
      const list = Object.values(this.modelList).flat();
      const item = list.find((x) => x.model_name == model_name);
      return item ? item.billing : "";
    },
    async getModels() {
      let data = await conversationModels({});
      this.modelList = data;
      let defaultData = await conversationDefault({});
      this.selectMdDefault = defaultData.model_name;
      this.selectedVendor = this.selectMdDefault;
      // if (this.selectedVendor == '') {
      //   this.selectedVendor = this.selectMdDefault
      // }
    },
    clipboardSuccess() {
      this.$message.success("文本已复制");
    },
    async airemove(item, idx) {
      await conversationMsgDelete({
        conversation_id: item.conversation_id,
        pair_id: item.id,
      });
      this.messages.splice(idx - 1, 2);
      this.$message.success("删除成功");
    },
    async aisave(item) {
      await conversationSave({
        conversation_id: item.conversation_id,
        pair_id: item.id,
      });
      this.$message.success("保存成功");
    },
    async aicxsc(item, idx) {
      try {
        const response = await fetch(`/prod-api/api/v1/conversation/loop`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + getToken(),
          },
          body: JSON.stringify({
            conversation_id: item.conversation_id,
            pair_id: item.id,
            model: this.selectedVendor,
          }),
        });

        if (!response.ok) {
          const error = await response.json();
          this.$message.error(error.error || "启动对话失败");
          return;
        } else {
          this.isDhJx = true;
          this.messages.splice(idx, this.messages.length - 1);
        }
        this.handleStreamResponse(response);
      } catch (error) {
        console.error(error);
        this.$message.error("启动对话失败");
      }
    },
    goAdd() {
      if (this.isDhJx) {
        this.$message.error("有正在进行的对话，请耐心等待");
        return false;
      }
      this.rightPage = 1; // 重置分页
      this.messages = [];
      store.dispatch("conversation/setConversationId", "");
      this.messages = [];
      this.selectedVendor = this.selectMdDefault;
    },
    handleResize() {
      this.hdHeight = window.innerHeight - 220;
    },
    async fetchConversations() {
      try {
        const response = await conversationList({ page: 1, limit: 10 });
        this.conversations = response.data.data.conversations;
      } catch (error) {
        this.$message.error("获取对话列表失败");
      }
    },
    async startConversation(conversationId, show_prompt) {
      this.drawer = true;
      this.messages.push({ role: "user", content: show_prompt });
      try {
        const response = await fetch(`/prod-api/api/v1/conversation/start`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + getToken(),
          },
          body: JSON.stringify({ conversation_id: conversationId }),
        });

        if (!response.ok) {
          const error = await response.json();
          this.$message.error(error.error || "启动对话失败");
          return;
        } else {
          this.isDhJx = true;
        }

        this.handleStreamResponse(response);
      } catch (error) {
        console.error(error);
        this.$message.error("启动对话失败");
      }
    },
    async startConversation2(conversationId, show_prompt) {
      this.drawer = true;
      show_prompt.forEach((item) => {
        if (item.role == "user") {
          this.messages.unshift({ role: "user", content: item.content });
        } else {
          this.messages.unshift({ role: "ai", content: item.content });
        }
      });
      try {
        const response = await fetch(`/prod-api/api/v1/conversation/produce`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + getToken(),
          },
          body: JSON.stringify({ conversation_id: conversationId }),
        });

        if (!response.ok) {
          const error = await response.json();
          this.$message.error(error.error || "启动对话失败");
          return;
        } else {
          this.isDhJx = true;
        }
        this.handleStreamResponse(response);
      } catch (error) {
        console.error(error);
        this.$message.error("启动对话失败");
      }
    },
    //流式接口处理回调
    async handleStreamResponse(response, callback) {
      const reader = response.body.getReader();
      const decoder = new TextDecoder("utf-8");
      let buffer = "";
      let params = { role: "ai", content: "", id: "", conversation_id: "" };
      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split("\n \n");

        for (const line of lines) {
          if (line.indexOf("data: ") > -1) {
            const data = line.replace("data: ", "");
            if (data.indexOf("[DONE]") > -1) {
              //结束
              this.isDhJx = false;
              let last = await getLastPairId({
                conversation_id: this.currentConversationId,
              });
              params.conversation_id = this.currentConversationId;
              params.id = last.pair_id;
            } else {
              if (
                this.messages.length > 0 &&
                this.messages[this.messages.length - 1].role == "ai"
              ) {
                params.content = params.content + data;
              } else {
                params.content = data;
                this.messages.push(params);
              }
            }
            this.scrollToBottom();
          }
        }

        buffer = lines[lines.length - 1];
      }
    },
    async sendMessage() {
      if (!this.userInput.trim()) return;
      this.messages.push({ role: "user", content: this.userInput });
      const tempUserInput = this.userInput; // 保存用户输入
      this.userInput = "";
      this.scrollToBottom();
      this.loading = true;

      try {
        const response = await fetch(`/prod-api/api/v1/conversation/message`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            Authorization: "Bearer " + getToken(),
          },
          body: JSON.stringify({
            conversation_id: this.currentConversationId,
            user_input: tempUserInput,
            model: this.selectedVendor,
          }),
        });
        if (!response.ok) {
          const error = await response.json();
          this.$message.error(error.error || "发送消息失败");
          return;
        } else {
          this.isDhJx = true;
        }
        this.handleStreamResponse(response);
      } catch (error) {
        console.error(error);
        this.$message.error("发送消息失败");
      } finally {
        this.loading = false;
      }
    },
    handleConversationAction(action, conversation) {
      if (action === "rename") {
        this.enableEditing(conversation);
      } else if (action === "delete") {
        this.deleteConversation(conversation);
      }
    },
    enableEditing(conversation) {
      this.editingConversationId = conversation.id;
    },
    async updateConversationTitle(conversation) {
      if (!conversation.title.trim()) return;
      this.editingConversationId = null;
      try {
        await conversationUpTitle({
          conversation_id: conversation.id,
          title: conversation.title,
        });
        this.$message.success("对话重命名成功");
      } catch (error) {
        this.$message.error("重命名失败");
      }
    },
    deleteConversation(conversation) {
      this.$confirm(`确定要删除对话 "${conversation.title}" 吗？`, "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            await conversationDelete({ conversation_id: conversation.id });
            this.conversations = this.conversations.filter(
              (c) => c.id !== conversation.id
            );
            if (conversation.id == this.currentConversationId) {
              this.goAdd();
            }
            this.$message.success("对话删除成功");
          } catch (error) {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {});
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const messageArea = this.$refs.messageArea;
        messageArea.scrollTop = messageArea.scrollHeight;
      });
    },
    saveToLibrary() {
      // 保存素材逻辑
      this.$message.success("保存成功");
      this.saveDialogVisible = false;
    },
    async getConversationDetail(conversationId, page = 1) {
      this.rightPage = page;
      try {
        const response = await conversationDetail({
          conversation_id: conversationId,
          page,
          limit: 10,
        });
        const newMessages = response.conversation.messages;
        this.selectedVendor = response.conversation.model_name;
        var newlist = [];
        newMessages.forEach((item) => {
          newlist.unshift({
            role: "ai",
            content: item.ai_content,
            conversation_id: item.conversation_id,
            id: item.id,
          });
          newlist.unshift({
            role: "user",
            content: item.user_content,
            conversation_id: item.conversation_id,
            id: item.id,
          });
        });
        if (page === 1) {
          this.messages = newlist; // 首次加载替换消息
        } else {
          this.messages = [...this.messages, ...newlist]; // 加载更多消息追加
        }

        // 判断是否还有更多数据
        this.hasMoreMessages = newMessages.length === 10;
        this.scrollToBottom();
      } catch (error) {
        this.$message.error("加载对话内容失败");
      }
    },
    // 点击对话项
    async onSelectConversation(conversationId) {
      if (this.isDhJx) {
        this.$message.error("有正在进行的对话，请耐心等待");
        return false;
      }
      this.setConversationId(conversationId); // 存入 Vuex
      this.getConversationDetail(conversationId); // 加载对应对话内容
    },
    setConversationId(id) {
      this.rightPage = 1; // 重置分页
      this.messages = [];
      store.dispatch("conversation/setConversationId", id);
    },

    // 上拉加载更多对话内容
    async loadMoreMessages() {
      if (!this.hasMoreMessages || !this.currentConversationId) return;

      this.rightPage += 1;
      this.getConversationDetail(this.currentConversationId, this.rightPage);
    },
    // 新建对话逻辑
    async createNewConversation() {
      if (!this.userInput.trim()) return;

      const tempUserInput = this.userInput; // 保存用户输入
      this.userInput = "";
      try {
        const response = await conversationCreate({
          model: this.selectedVendor,
          user_input: tempUserInput, // 示例输入
        });
        this.messages = []; // 清空当前消息

        this.openNew(response.conversation_id, response.show_prompt); // 存入 Vuex
      } catch (error) {
        this.$message.error("创建新对话失败");
      }
    },
    openNew2(id, show_prompt) {
      this.setConversationId(id); // 存入 Vuex
      this.startConversation2(id, show_prompt);
      var that = this;
      setTimeout(function () {
        that.hasMore = true;
        that.conversations = [];
        that.leftPage = 1;
        that.getConversationsList();
      }, 1000);
    },
    openNew(id, show_prompt) {
      this.setConversationId(id); // 存入 Vuex
      this.startConversation(id, show_prompt);
      var that = this;
      setTimeout(function () {
        that.hasMore = true;
        that.conversations = [];
        that.leftPage = 1;
        that.getConversationsList();
      }, 1000);
    },
    async getConversationsList() {
      if (!this.hasMore || this.leftLoading) return; // 已加载完或正在加载
      this.leftLoading = true;

      try {
        var obj = {
          page: this.leftPage,
          limit: this.leftPageSize,
        };
        if (this.$route.params.id) {
          obj.creation_id = Number(this.$route.params.id);
        }
        const res = await conversationsList(obj);
        const newConversations = res.conversations;

        // 更新数据
        this.conversations = [...this.conversations, ...newConversations];
        this.leftPage += 1; // 下一页

        // 判断是否还有更多数据
        if (newConversations.length < this.leftPageSize) {
          this.hasMore = false;
        }
      } catch (error) {
        this.$message.error("加载对话失败");
      } finally {
        this.leftLoading = false;
      }
    },
    handleScroll(event) {
      const container = this.$refs.scrollbarRef;
      console.log(
        container.scrollHeight - container.scrollTop,
        container.clientHeight
      );
      if (
        container.scrollHeight - container.scrollTop <
        container.clientHeight + 50
      ) {
        // 滚动到底部
        console.log("已滚动到底部");
        this.getConversationsList(); // 触发加载
      }
    },
    showDldh() {
      this.drawer = true;
      var that = this;
      setTimeout(function () {
        that.$refs.scrollbarRef.addEventListener("scroll", that.handleScroll);
      }, 200);
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.handleResize();
    });
    if (this.$route.params.id) {
      this.zpId = Number(this.$route.params.id);
    }

    window.addEventListener("resize", this.handleResize);
    this.getConversationsList();
    if (this.currentConversationId) {
      this.getConversationDetail(this.currentConversationId);
    }
    this.getModels();
    // this.fetchConversations();
    // this.startConversation(4)
  },
};
</script>

<style scoped lang="scss">
.zt {
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 2px;
}

.active {
  background: rgba(242, 244, 248, 1);
}

.dropdown-wrapper-list.el-dropdown-menu--medium .el-dropdown-menu__item {
  padding: 0;

  div {
    padding: 0 10px;
    margin: 0 5px;
  }
}

.myradio {
  display: flex;
  flex-direction: column;

  .el-radio {
    line-height: 32px;
    margin-bottom: 10px;
  }
}

.dropdown-wrapper {
  margin: 10px 0;
  float: left;
}

.moTitle {
  font-size: 12px;
  color: rgba(0, 1, 27, 1);
  padding-left: 17px;
  line-height: 32px;
}

.el-dropdown-link {
  font-size: 14px;
  color: #333;
  cursor: pointer;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.el-dropdown-link-icon {
  margin-left: 5px;
}

.conversation-edit-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 5px;
  background: #fff;
}

.aiStyle {
  position: fixed;
  bottom: 60px;
  right: 10px;
  width: 80px;
  height: 80px;
  background-size: cover;
}

.conversation-container {
  display: flex;
  height: 100vh;
}

.conversation-list {
  width: 220px;
  border-right: 1px solid #ebeef5;
  background: rgba(242, 244, 248, 1);

  ::v-deep .el-card__body {
    padding: 0;
  }
}

.conversation-list.sq {
  width: 40px;

  .el-scrollbar {
    display: none;
  }
}

.conversation-list .top {
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;

  i {
    font-size: 20px;
    cursor: pointer;
  }
}

conversation-list .bottom {
}

.conversation-item {
  position: relative;
  padding-left: 10px;
  padding-right: 30px;
  cursor: pointer;
  border-bottom: 1px solid #ebeef5;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: rgba(0, 1, 27, 1);

  ::v-deep .el-dropdown {
    position: absolute;
    right: 14px;
    display: none;
    top: 0;
  }

  .dropdown-trigger {
    cursor: pointer;
    margin-left: auto;
    padding: 0 4px;
  }
}

.conversation-item.active {
  background: linear-gradient(
    90deg,
    rgba(22, 93, 235, 0.12) 0%,
    rgba(22, 93, 235, 0.04) 100%
  );

  .el-dropdown {
    display: block;
  }
}

.conversation-item:hover {
  background: linear-gradient(
    90deg,
    rgba(22, 93, 235, 0.12) 0%,
    rgba(22, 93, 235, 0.04) 100%
  );

  .el-dropdown {
    display: block;
  }
}

.conversation-content {
  flex: 1;
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  padding-top: 0;

  ::v-deep .el-card__body {
    padding: 0;
  }

  .top {
    height: 60px;
    justify-content: space-between;
    align-items: center;
    display: flex;

    i {
      font-size: 20px;
      cursor: pointer;
      color: #a8a8a8;
    }
  }
}

.message-area {
  flex: 1;
  overflow-y: auto;

  .aiImg {
    width: 32px;
    height: 32px;
  }
}

.message:hover .caoZuo {
  display: block;
}

.message {
  margin: 10px 0;
  font-size: 14px;
  line-height: 24px;
  display: flex;
  position: relative;
  padding-bottom: 25px;

  .caoZuo {
    margin-top: 10px;
    position: absolute;
    left: 40px;
    bottom: 0;
    display: none;
  }

  .caoZuo img {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: 10px;
  }
}

.message.user {
  color: #fff;
  text-align: left;
  border-radius: 8px;
  justify-content: right;

  .aiImg {
    display: none;
  }
}

.message-content {
  white-space: pre-wrap !important;
  word-break: break-word;
  /* 避免长文本溢出 */
  display: inline-block;
  padding: 10px;
  border-radius: 5px;
}

.bigClass {
  color: rgba(0, 1, 27, 0.5);
  font-size: 12px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.message.user .message-content {
  color: rgba(0, 1, 27, 1);
  max-width: 80%;
  background-color: #f5f5f5;
}

.input-area {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;

  ::v-deep .el-input__count {
    background: transparent;
  }

  ::v-deep .el-textarea__inner {
    background: rgba(237, 240, 247, 1);
    border-radius: 16px;
    padding: 15px;
    font-size: 16px;
    height: 110px;
    padding-right: 50px;
  }

  .fs {
    position: absolute;
    right: 32px;
    bottom: 42px;
    height: 40px;
    width: 40px;
    text-align: center;
    font-size: 16px;
    display: flex;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
  }
}

.input-area-New {
  display: block;
  position: relative;
}

.bigClass {
  font-size: 12px;
  color: rgba(0, 1, 27, 0.5);
  margin: 10px 0;
  padding: 5px 10px;
}

.new-conversation-prompt {
  text-align: center;
  margin-top: 50px;

  p {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
  }

  .el-button {
    font-size: 16px;
    padding: 10px 20px;
  }
}
</style>
